<%@page isELIgnored="false" pageEncoding="UTF-8" contentType="text/html; UTF-8" %>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>分类列表</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" />
	<script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.12.4.js"></script>
</head>
<body>
<!--分类树形列表-->
	<div id="category"></div>
	<div id="categoryTree" lay-filter="categoryTree">
		<!--拼接好的树形组件显示区域-->
	</div>

<!--渲染树形列表-->
	<script type="text/javascript">
		$(function () {
			$.ajax({
				url:"${pageContext.request.contextPath}/category/categories",
				// 1.获取后台数据result
				success:function (result) {
					console.log(result);
					//拼接属性组件的渲染
					var context = "<script type=\"text/javascript\">\n" +
							"\t\tlayui.use('tree', function(){\n" +
							"\t\t\tvar tree = layui.tree;\n" +
							"\t\t\tvar inst1 = tree.render({\n" +
							"\t\t\t\telem: '#category'\n" +
							"\t\t\t\t,data: [";
					$.each(result,function (index1,category1) {
						context += "{id:\""+category1.catId+"\",title: \""+category1.name+"\",children:[" ;
						$.each(category1.sonList,function (index2,category2) {
							context += "{id:\""+category2.catId+"\",title: \""+category2.name+"\",children:[" ;
							$.each(category2.sonList,function (index3,category3) {
								context += "{id:\""+category3.catId+"\",title: \""+category3.name+"\"},";
							});
							context += "]},";
						});
						context += "]},";
					});
					context += "]});});<\/script>";
					// 将html写入页面中
					$("#category").html(context);
					// 强制layui渲染菜单 更新渲染
					layui.use('element', function(){
						var element = layui.element;
						element.render('nav', 'categoryTree')
					});
				}
			})
		})
	</script>
</body>
</html>